<template>
    <div class="system-menu-container">
        <el-dialog
                title="检测报告"
                v-model="isShowDialog"
                width="650px"

        >

            <div id="printRref" class="doc"
                 style="font-size: 10px;background-color: #ffffff;color: #000000;">
                <div style="height: 40px;"/>
                <el-container style="margin-bottom: 20px;border-bottom: solid 1px #000000;">
                    <el-header style="text-align: center;font-size: 18px;">{{userInfo.aliasName}}</el-header>
                    <el-main style="padding: 10px;">
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="8">姓名</el-col>
                            <el-col :span="8">性别</el-col>
                            <el-col :span="8">年龄</el-col>
                        </el-row>

                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="8">{{dtoInspect.openid}}</el-col>
                            <el-col :span="8">
                                <p v-if="dtoInspect.sex == '1'">男</p>
                                <p v-if="dtoInspect.sex == '0'">女</p>
                            </el-col>
                            <el-col :span="8">{{dtoInspect.age}}</el-col>
                        </el-row>

                        <!--                            <el-row style="height: 5px;"></el-row>-->

                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="8">电话</el-col>
                            <el-col :span="8">身份证号</el-col>
                            <el-col :span="8">检测日期</el-col>
                        </el-row>

                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="8">
                                {{dtoInspect.phone?dtoInspect.phone.replace(/(\d{3})(\d{4})(\d{4})/,'$1****$3'):''}}
                            </el-col>
                            <el-col :span="8">/</el-col>
                            <el-col :span="8">{{dtoInspect.testDate}}</el-col>
                        </el-row>
                    </el-main>
                </el-container>


                <el-container>
                    <el-header height="20">一.常规检测项</el-header>
                    <el-main style="padding: 10px;">
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">检测项目</el-col>
                            <el-col :span="6">检测结果</el-col>
                            <el-col :span="6">参考值</el-col>
                            <el-col :span="6">单位</el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">血压</el-col>
                            <el-col :span="6">{{voInspectData.BP}}</el-col>
                            <el-col :span="6">60-90/90-140</el-col>
                            <el-col :span="6">mmHg</el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">心率</el-col>
                            <el-col :span="6">{{voInspectData.HR}}</el-col>
                            <el-col :span="6">60-100</el-col>
                            <el-col :span="6">次/分</el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">血糖</el-col>
                            <el-col :span="6">{{voInspectData.GLU}}</el-col>
                            <el-col :span="6">3.9-6.0</el-col>
                            <el-col :span="6">mmol/L</el-col>
                        </el-row>
                        <!--                        <el-row style="margin-bottom: 5px;">-->
                        <!--                            <el-col :span="6">体脂</el-col>-->
                        <!--                            <el-col :span="6"></el-col>-->
                        <!--                            <el-col :span="6"></el-col>-->
                        <!--                            <el-col :span="6"></el-col>-->
                        <!--                        </el-row>-->
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">&nbsp;体脂</el-col>
                            <el-col :span="6">{{voInspectData.TZI}}</el-col>
                            <el-col :span="6">
                                <p v-if="dtoInspect.sex == '1'">15%~18%</p>
                                <p v-if="dtoInspect.sex == '0'">20%~25%</p>
                            </el-col>
                            <el-col :span="6"></el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">&nbsp;体重</el-col>
                            <el-col :span="6">{{voInspectData.TZO}}</el-col>
                            <el-col :span="6"></el-col>
                            <el-col :span="6">KG</el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">肌肉率</el-col>
                            <el-col :span="6">{{voInspectData.JRL}}</el-col>
                            <el-col :span="6">
                                <p v-if="dtoInspect.sex == '1'">30%~40%</p>
                                <p v-if="dtoInspect.sex == '0'">25%~27%</p>
                            </el-col>
                            <el-col :span="6"></el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">水分</el-col>
                            <el-col :span="6">{{voInspectData.SF}}</el-col>
                            <el-col :span="6">50%~60%</el-col>
                            <el-col :span="6"></el-col>
                        </el-row>

                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">血氧</el-col>
                            <el-col :span="6">{{voInspectData.SPO2}}</el-col>
                            <el-col :span="6">&gt;%95</el-col>
                            <el-col :span="6"></el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">尿酸</el-col>
                            <el-col :span="6">{{voInspectData.UA}}</el-col>
                            <el-col :span="6">
                                <p v-if="dtoInspect.sex == '1'">149~456</p>
                                <p v-if="dtoInspect.sex == '0'">89~357</p>
                            </el-col>
                            <el-col :span="6">umol/L</el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">胆固醇</el-col>
                            <el-col :span="6">{{voInspectData.CHOL}}</el-col>
                            <el-col :span="6">2.9～6.0</el-col>
                            <el-col :span="6">mmol/L</el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">尿常规</el-col>
                            <el-col :span="6"></el-col>
                            <el-col :span="6"></el-col>
                            <el-col :span="6"></el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">&nbsp;&nbsp;&nbsp;&nbsp;⽩细胞(LEU)</el-col>
                            <el-col :span="6">{{voInspectData.emp.LEU}}</el-col>
                            <el-col :span="6">阴性(-)或微量(+-)</el-col>
                            <el-col :span="6"></el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">&nbsp;&nbsp;&nbsp;&nbsp;亚硝酸盐(NIT)</el-col>
                            <el-col :span="6">{{voInspectData.emp.NIT}}</el-col>
                            <el-col :span="6">阴性(-)</el-col>
                            <el-col :span="6"></el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">&nbsp;&nbsp;&nbsp;&nbsp;尿胆原(UBG)</el-col>
                            <el-col :span="6">{{voInspectData.emp.UBG}}</el-col>
                            <el-col :span="6">阴性(-)</el-col>
                            <el-col :span="6"></el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">&nbsp;&nbsp;&nbsp;&nbsp;蛋⽩质(PRO)</el-col>
                            <el-col :span="6">{{voInspectData.emp.PRO}}</el-col>
                            <el-col :span="6">阴性(-)或微量(+-)</el-col>
                            <el-col :span="6"></el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">&nbsp;&nbsp;&nbsp;&nbsp;潜⾎(BLD)</el-col>
                            <el-col :span="6">{{voInspectData.emp.BLD}}</el-col>
                            <el-col :span="6">阴性(-)或微量(+-)</el-col>
                            <el-col :span="6"></el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">&nbsp;&nbsp;&nbsp;&nbsp;酮体(KET)</el-col>
                            <el-col :span="6">{{voInspectData.emp.KET}}</el-col>
                            <el-col :span="6">阴性(-)或微量(+-)</el-col>
                            <el-col :span="6"></el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">&nbsp;&nbsp;&nbsp;&nbsp;胆红素(BIL)</el-col>
                            <el-col :span="6">{{voInspectData.emp.BIL}}</el-col>
                            <el-col :span="6">阴性(-)</el-col>
                            <el-col :span="6"></el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">&nbsp;&nbsp;&nbsp;&nbsp;葡萄糖(GLU)</el-col>
                            <el-col :span="6">{{voInspectData.emp.GLU}}</el-col>
                            <el-col :span="6">阴性(-)或微量(+-)</el-col>
                            <el-col :span="6"></el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">&nbsp;&nbsp;&nbsp;&nbsp;维⽣素C(VC)</el-col>
                            <el-col :span="6">{{voInspectData.emp.VC}}</el-col>
                            <el-col :span="6">阴性(-)或微量(+-)</el-col>
                            <el-col :span="6"></el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">&nbsp;&nbsp;&nbsp;&nbsp;微量⽩蛋⽩(MA)</el-col>
                            <el-col :span="6">{{voInspectData.emp.MA}}</el-col>
                            <el-col :span="6">&lt;30</el-col>
                            <el-col :span="6">mg/L</el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">&nbsp;&nbsp;&nbsp;&nbsp;肌酐(CRE)</el-col>
                            <el-col :span="6">{{voInspectData.emp.CRE}}</el-col>
                            <el-col :span="6">4.4-17.7</el-col>
                            <el-col :span="6">mmol/L</el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">&nbsp;&nbsp;&nbsp;&nbsp;钙离⼦(CA)</el-col>
                            <el-col :span="6">{{voInspectData.emp.CA}}</el-col>
                            <el-col :span="6">0-10</el-col>
                            <el-col :span="6">mmol/L</el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">&nbsp;&nbsp;&nbsp;&nbsp;(ACR)</el-col>
                            <el-col :span="6">{{voInspectData.emp.ACR}}</el-col>
                            <el-col :span="6">&lt;3.4</el-col>
                            <el-col :span="6">mg/mmoL</el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">&nbsp;&nbsp;&nbsp;&nbsp;PH值</el-col>
                            <el-col :span="6">{{voInspectData.emp.PH}}</el-col>
                            <el-col :span="6">5.0-8.5</el-col>
                            <el-col :span="6"></el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">&nbsp;&nbsp;&nbsp;&nbsp;比重(SG)</el-col>
                            <el-col :span="6">{{voInspectData.emp.SG}}</el-col>
                            <el-col :span="6">1.015~1.025</el-col>
                            <el-col :span="6"></el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">体温</el-col>
                            <el-col :span="6">{{voInspectData.T}}</el-col>
                            <el-col :span="6">36-37</el-col>
                            <el-col :span="6">℃</el-col>
                        </el-row>


                    </el-main>
                </el-container>

                <div style="height: 160px;"/>
                <el-container>
                    <el-header height="30">二.心电图</el-header>
                    <el-main style="padding: 10px;">
                        <div style="width: 590px;height: 680px;">
                            <canvas style="width: 590px;height: 680px;"
                                    type="2d"
                                    id='ecg'
                                    force-use-old-canvas="true"
                                    width="521"
                                    height="601"
                            />
                        </div>
                    </el-main>
                </el-container>
                <div style="height: 300px;"/>
                <el-container>
                    <el-header height="30">三.诊断结果</el-header>
                    <el-main style="padding: 10px;">
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">结论</el-col>
                            <el-col :span="18">说明</el-col>
                        </el-row>
                        <el-row style="margin-bottom: 5px;">
                            <el-col :span="6">{{value}}</el-col>
                            <el-col :span="18">{{textarea}}</el-col>
                        </el-row>
                    </el-main>
                </el-container>


            </div>

            <div style="height: 60px;"/>

            <!--            <el-button @click="onPrintJs" size="small" type="primary" icon="iconfont icon-dayin">点击打印演示</el-button>-->
            <!--            <el-button @click="onPrintJpg" size="small" type="primary" icon="iconfont icon-dayin">点击截图</el-button>-->
            <!--            <el-button @click="onPrintPdf" size="small" type="primary" icon="iconfont icon-dayin">点击PDF</el-button>-->


            <el-row style="margin-bottom: 5px;border-top: solid 1px #000000;">
                <el-col :span="6">
                    <el-form-item label="诊断结果">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-col>
                <el-col :span="4"></el-col>
                <el-col :span="14">
                    <el-form-item label="补充说明">
                        <el-input
                                type="textarea"
                                :autosize="{ minRows: 4, maxRows: 10}"
                                placeholder="请输入内容"
                                v-model="textarea">
                        </el-input>
                    </el-form-item>


                </el-col>
            </el-row>

            <div style="height: 40px;"/>
            <el-row style="margin-bottom: 5px;">
                <el-col :span="16"></el-col>
                <el-col :span="8">
                    <el-button @click="onCancel" size="small">取 消</el-button>
                    <el-button type="primary" @click="onSubmit" size="small">确 定</el-button>

                </el-col>
            </el-row>


            <div style="height: 100px;"/>
        </el-dialog>
    </div>
</template>

<script lang="ts">
	import { uploadBase64 } from '/@/api/mech.ts';
	import { getCurrentInstance, reactive, toRefs } from 'vue';
	import { getSession } from '/@/utils/storage.ts';
	import { useRoute } from 'vue-router';
	import printJs from 'print-js';
	import '/@/utils/html2canvas.js';

	import { findInspectData, putInspectData } from '/@/api/inspect.ts';
	import JsPDF from 'jspdf';

	import { majorityElement } from '/@/utils/arrayOperation.ts';

	export default {
		name: 'PopInspect',
		setup() {
			const { proxy } = getCurrentInstance() as any;
			const route = useRoute();

			const state = reactive({
				isShowDialog: false,
				head: {
					token: '' + getSession('token'),
				},

				url: import.meta.env.VITE_API_URL + '/s-file/api/file/uploads',
				dialogVisible: false,

				dtoInspect: {
					phone: '',
					testDate: '',
					openid: '',
					sex: '',
					age: '',
				},

				dtoUpload: {
					imgData: '',
					fileName: '',
				},
				dtoSaveInspect: {
					v6AioDataId: 0,
					diaResult: '',
					diaMsg: '',
					diaPdf: '',
				},
				userInfo: {},
				voInspect: {},
				voInspectData: {
					BP: '',
					HR: '',
					GLU: '',
					TZI: '',
					TZO: '',
					JRL: '',
					SF: '',
					SPO2: '',
					UA: '',
					CHOL: '',
					emp: {
						LEU: '',
						NIT: '',
						UBG: '',
						PRO: '',
						BLD: '',
						KET: '',
						BIL: '',
						GLU: '',
						VC: '',
						MA: '',
						CRE: '',
						CA: '',
						ACR: '',
						PH: '',
						SG: '',
					},
					T: '',

				},

				options: [
					{
						value: '无',
						label: '无',
					}, {
						value: '正常',
						label: '正常',
					}, {
						value: '异常',
						label: '异常',
					},
				],
				value: '无',
				textarea: '',

			});
			// 打开弹窗
			const openDialog = (row?: object) => {
				console.log('====>>openDialog');
				console.log(row);

				if (row) {

					state.dtoInspect.phone = row.phone;
					state.dtoInspect.testDate = row.testDate;
					state.dtoInspect.openid = row.openid;
					state.dtoInspect.sex = row.sex;
					state.dtoInspect.age = row.age;

					state.value = row.diaResult;
					state.textarea = row.diaMsg;

					state.dtoSaveInspect.v6AioDataId = row.v6AioDataId;


					initForm();
				}

				state.isShowDialog = true;
			};
			// 关闭弹窗
			const closeDialog = (row?: object) => {
				console.log(row);
				state.isShowDialog = false;
				proxy.$emit('fuzujian');

			};
			// 取消
			const onCancel = () => {
				closeDialog();
			};
			// 表单初始化，方法：`resetFields()` 无法使用
			const initForm = () => {
				console.log('====>>initForm');
				state.userInfo = getSession('userInfo');

				findInspectData(state.dtoInspect).then((res: any) => {

					console.log(res.data);
					state.voInspect = res.data;
					for (let result of res.data.inspectData) {
						switch (result.type) {

							case 1:
								state.voInspectData.BP = result.value;
								break;
							case 2:
								state.voInspectData.HR = result.value;
								break;
							case 3:
								state.voInspectData.GLU = result.value;
								break;
							case 4:
								state.voInspectData.TZI = result.value;
								break;
							case 5:
								state.voInspectData.SPO2 = result.value;
								break;
							case 6:
								state.voInspectData.TZO = result.value;
								break;
							case 7:
								state.voInspectData.UA = result.value;
								break;
							case 8:
								state.voInspectData.CHOL = result.value;
								break;
							case 13:
								state.voInspectData.JRL = result.value;
								break;
							case 14:
								state.voInspectData.SF = result.value;
								break;
							case 15:
								let emps = result.value.split(',');
								state.voInspectData.emp.LEU = emps[0].replace('null', '');
								state.voInspectData.emp.NIT = emps[1].replace('null', '');
								state.voInspectData.emp.UBG = emps[2].replace('null', '');
								state.voInspectData.emp.PRO = emps[3].replace('null', '');
								state.voInspectData.emp.BLD = emps[4].replace('null', '');
								state.voInspectData.emp.KET = emps[5].replace('null', '');
								state.voInspectData.emp.BIL = emps[6].replace('null', '');
								state.voInspectData.emp.GLU = emps[7].replace('null', '');
								state.voInspectData.emp.VC = emps[8].replace('null', '');
								state.voInspectData.emp.MA = emps[9].replace(' mg/L', '').replace('null', '');
								state.voInspectData.emp.CRE = emps[10].replace(' mmol/L', '').replace('null', '');
								state.voInspectData.emp.CA = emps[11].replace(' mmol/L', '').replace('null', '');
								state.voInspectData.emp.ACR = emps[12].replace(' mmol/l', '').replace('null', '');
								state.voInspectData.emp.PH = emps[13].replace('null', '');
								state.voInspectData.emp.SG = emps[14].replace('null', '');
								break;
							case 16:
								state.voInspectData.T = result.value;
								break;
						}
					}


					setTimeout(() => {
						drowEcg();
					}, 500);
				});


			};
			// 提交
			const onSubmit = () => {

				state.dtoSaveInspect.diaResult = state.value;
				state.dtoSaveInspect.diaMsg = state.textarea;

				if (state.dtoSaveInspect.diaResult.length == 0) {
					proxy.$message.error('结论必选');
				} else if (state.dtoSaveInspect.diaResult == '异常' && state.dtoSaveInspect.diaMsg.length == 0) {
					proxy.$message.error('说明必填');
				} else {

					onPrintPdf();
				}


			};
			// 打印点击
			const onPrintJs = () => {
				printJs({
					printable: 'printRref',
					type: 'html',
					// header: '测试机构—2021-06-21-张三的检测记录',
					css: ['//at.alicdn.com/t/font_2298093_o73r8wjdhlg.css', 'https://unpkg.com/element-plus/lib/theme-chalk/index.css'],
					scanStyles: false,
					style: `@media print{.mb15{margin-bottom:15px;}.el-button--small i.iconfont{font-size: 12px !important;margin-right: 5px;}}`,
				});
			};

			const onPrintJpg = () => {
				setTimeout(() => {
					html2canvas(document.getElementById('printRref'), {
						background: '#ffffff', // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的
						dpi: 300,
						onrendered: function(canvas) {

							console.log(canvas.width);
							console.log(canvas.height);

							let dataUrl = canvas.toDataURL();
							state.dtoUpload.imgData = dataUrl;
							state.dtoUpload.fileName = '测试张三2021-06-21检测报告.jpg';
							uploadBase64(state.dtoUpload).then((res: any) => {
								console.log(res.data.fileUrl);
							});
						},
					});
				}, 1000);
				// htmlToImage
				// 	.toJpeg(documents.value)
				// 	.then(function(dataUrl) {
				// 		state.dtoUpload.imgData = dataUrl;
				// 		state.dtoUpload.fileName = '测试张三2021-06-21检测报告.jpg';
				// 		uploadBase64(state.dtoUpload).then((res: any) => {
				// 			console.log(res.data.fileUrl);
				// 		});
				//
				// 		// console.log(state.imgUrl);
				// 	}).catch(function(err) {
				// 	console.log('====>>err');
				// 	console.log(err);
				// });
			};
			const onPrintPdf = () => {
				const loading = proxy.$loading({
					lock: true,
					text: '报告生成中,请等待15秒...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)',
				});
				setTimeout(() => {
					loading.close();
				}, 15000);

				setTimeout(() => {

					html2canvas(document.getElementById('printRref'), {
						background: '#ffffff', // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的
						dpi: 300,
						onrendered: function(canvas) {
							// let url = canvas.toDataURL();
							// console.log(url);

							// htmlToImage.toCanvas(documents.value)
							// 	.then(function(canvas) {
							//

							console.log(canvas.width);
							console.log(canvas.height);
							let c_width = canvas.width;
							let c_height = canvas.height;


							let [a4W, a4H] = [595.28, 841.89]; // a4纸尺寸[595.28, 841.89];

							let pageHeight = c_width / a4W * a4H;

							let leftHeight = c_height;
							let position = 0;

							let imgWidth = a4W - 80;
							let imgHeight = imgWidth / c_width * c_height;
							let pageData = canvas.toDataURL('image/jpeg', 1.0);

							let PDF = new JsPDF('p', 'pt', [a4W, a4H]);
							if (leftHeight < pageHeight) {
								PDF.addImage(pageData, 'JPEG', 40, 0 + 40, imgWidth, imgHeight);
							} else {
								while (leftHeight > 0) {
									PDF.addImage(pageData, 'JPEG', 40, position + 40, imgWidth, imgHeight + 50);
									leftHeight -= pageHeight;
									position -= a4H;
									if (leftHeight > 0) {
										PDF.addPage();
									}
								}
							}

							let datauri = PDF.output('dataurlstring');
							state.dtoUpload.imgData = datauri;
							state.dtoUpload.fileName = '测试张三2021-06-21检测报告.pdf';
							uploadBase64(state.dtoUpload).then((res: any) => {
								console.log(res.data.fileUrl);
								state.dtoSaveInspect.diaPdf = res.data.fileUrl;

								putInspectData(state.dtoSaveInspect).then((res: any) => {
									console.log('==>>更新成功');
									console.log(res.data);
									loading.close();


									//关闭弹窗
									closeDialog();

								});
							});
							// PDF.save('测试2021-06-24-张三' + '.pdf');

							// let data: {
							// 	multipartFile: PDF,
							// };
							//
							// uploads(data).then((res: any) => {
							// 	console.log(res.data);
							// });

							// });


						},
					});


				}, 2000);

			};


			const drawSmallGrid = (c_canvas) => {
				var context = c_canvas.getContext('2d');
				context.strokeStyle = '#f1dedf';
				context.strokeWidth = 1;
				context.beginPath();
				for (var x = 20.5; x < 521; x += 2) {
					context.moveTo(x, 0);
					context.lineTo(x, 151);

					context.moveTo(x, 200);
					context.lineTo(x, 351);

					context.moveTo(x, 400);
					context.lineTo(x, 551);
					context.stroke();
				}


				for (var y = 0.5; y < 551; y += 2) {
					if ((y > 151 && y < 200) || (y > 351 && y < 400)) {
						continue;
					}
					context.moveTo(20, y);
					context.lineTo(551, y);
					context.stroke();
				}
				context.closePath();
				return;
			};
			const drawMediumGrid = (c_canvas) => {
				var context = c_canvas.getContext('2d');
				context.strokeStyle = '#f0adaa';
				context.strokeWidth = 1;
				context.beginPath();
				for (var x = 20.5; x < 521; x += 10) {
					context.moveTo(x, 0);
					context.lineTo(x, 151);

					context.moveTo(x, 200);
					context.lineTo(x, 351);

					context.moveTo(x, 400);
					context.lineTo(x, 551);
					context.stroke();
				}


				for (var y = 0.5; y < 551; y += 10) {
					if ((y > 151 && y < 200) || (y > 351 && y < 400)) {
						continue;
					}
					context.moveTo(20, y);
					context.lineTo(551, y);


					context.stroke();
				}
				context.closePath();
				return;
			};


			const drawBigGrid = (c_canvas) => {
				var context = c_canvas.getContext('2d');
				context.strokeStyle = '#e0514b';
				context.strokeWidth = 1;
				context.beginPath();
				for (var x = 20.5; x < 521; x += 50) {
					context.moveTo(x, 0);
					context.lineTo(x, 151);

					context.moveTo(x, 200);
					context.lineTo(x, 351);

					context.moveTo(x, 400);
					context.lineTo(x, 551);
					context.stroke();
				}


				for (var y = 0.5; y < 551; y += 50) {
					if ((y > 151 && y < 200) || (y > 351 && y < 400)) {
						continue;
					}
					context.moveTo(20, y);
					context.lineTo(551, y);
					context.stroke();
				}
				context.closePath();
				return;
			};

			const drawLine = (c_canvas) => {
				console.log('==数据长度');
				console.log(state.voInspect.ecgData.length);

				let data1_1 = state.voInspect.ecgData[0].slice(0, 2500);
				let data1_2 = state.voInspect.ecgData[0].slice(2500, 5000);
				let data1_3 = state.voInspect.ecgData[0].slice(5000, 7500);

				let data2_1 = state.voInspect.ecgData[1].slice(0, 2500);
				let data2_2 = state.voInspect.ecgData[1].slice(2500, 5000);
				let data2_3 = state.voInspect.ecgData[1].slice(2500, 5000);

				let data3_1 = state.voInspect.ecgData[2].slice(0, 2500);
				let data3_2 = state.voInspect.ecgData[2].slice(2500, 5000);
				let data3_3 = state.voInspect.ecgData[2].slice(5000, 7500);

				let d1_1 = majorityElement(data1_1);
				let d1_2 = majorityElement(data1_2);
				let d1_3 = majorityElement(data1_3);

				let d2_1 = majorityElement(data2_1);
				let d2_2 = majorityElement(data2_2);
				let d2_3 = majorityElement(data2_3);

				let d3_1 = majorityElement(data3_1);
				let d3_2 = majorityElement(data3_2);
				let d3_3 = majorityElement(data3_3);


				console.log(d1_1 + ':' + d1_2 + ':' + d1_3);
				console.log(d2_1 + ':' + d2_2 + ':' + d2_3);
				console.log(d3_1 + ':' + d3_2 + ':' + d3_3);


				var ctx = c_canvas.getContext('2d');
				ctx.strokeStyle = '#000';
				ctx.strokeWidth = 1;

				ctx.fillText('O1', 2.5, 25);
				ctx.fillText('O2', 2.5, 75);
				ctx.fillText('O3', 2.5, 125);

				ctx.fillText('O1', 2.5, 225);
				ctx.fillText('O2', 2.5, 275);
				ctx.fillText('O3', 2.5, 325);

				ctx.fillText('O1', 2.5, 425);
				ctx.fillText('O2', 2.5, 475);
				ctx.fillText('O3', 2.5, 525);

				ctx.fillText('0s', 20, 175);
				ctx.fillText('3s', 170, 175);
				ctx.fillText('6s', 320, 175);
				ctx.fillText('9s', 470, 175);

				ctx.fillText('10s', 20, 375);
				ctx.fillText('13s', 170, 375);
				ctx.fillText('16s', 320, 375);
				ctx.fillText('19s', 470, 375);

				ctx.fillText('20s', 20, 575);
				ctx.fillText('23s', 170, 575);
				ctx.fillText('26s', 320, 575);
				ctx.fillText('29s', 470, 575);


				ctx.beginPath();
				let m = 25;
				let n = 25;

				m = 25;
				ctx.moveTo(20.5, m);
				for (let i = 0; i < data1_1.length; i++) {
					let y = -data1_1[i] / d1_1 + m;
					if (y < m - n) y = m - n;
					if (y > m + n) y = m + n;
					ctx.lineTo(i / 5 + 20, y);
				}

				m = 75;
				ctx.moveTo(20.5, m);
				for (let i = 0; i < data2_1.length; i++) {
					let y = -data2_1[i] / d2_1 + m;
					if (y < m - n) y = m - n;
					if (y > m + n) y = m + n;
					ctx.lineTo(i / 5 + 20, y);
				}
				m = 125;
				ctx.moveTo(20.5, m);
				for (let i = 0; i < data3_1.length; i++) {
					let y = -data3_1[i] / d3_1 + m;
					if (y < m - n) y = m - n;
					if (y > m + n) y = m + n;
					ctx.lineTo(i / 5 + 20, y);
				}


				m = 225;
				ctx.moveTo(20.5, m);
				for (let i = 0; i < data1_2.length; i++) {
					let y = -data1_2[i] / d1_2 + m;
					if (y < m - n) y = m - n;
					if (y > m + n) y = m + n;
					ctx.lineTo(i / 5 + 20, y);
				}

				m = 275;
				ctx.moveTo(20.5, m);
				for (let i = 0; i < data2_2.length; i++) {
					let y = -data2_2[i] / d2_2 + m;
					if (y < m - n) y = m - n;
					if (y > m + n) y = m + n;
					ctx.lineTo(i / 5 + 20, y);
				}
				m = 325;
				ctx.moveTo(20.5, m);
				for (let i = 0; i < data3_2.length; i++) {
					let y = -data3_2[i] / d3_2 + m;
					if (y < m - n) y = m - n;
					if (y > m + n) y = m + n;
					ctx.lineTo(i / 5 + 20, y);
				}


				m = 425;
				ctx.moveTo(20.5, m);
				for (let i = 0; i < data1_3.length; i++) {
					let y = -data1_3[i] / d1_3 + m;
					if (y < m - n) y = m - n;
					if (y > m + n) y = m + n;
					ctx.lineTo(i / 5 + 20, y);
				}

				m = 475;
				ctx.moveTo(20.5, m);
				for (let i = 0; i < data2_3.length; i++) {
					let y = -data2_3[i] / d2_3 + m;
					if (y < m - n) y = m - n;
					if (y > m + n) y = m + n;
					ctx.lineTo(i / 5 + 20, y);
				}
				m = 525;
				ctx.moveTo(20.5, m);
				for (let i = 0; i < data3_3.length; i++) {
					let y = -data3_3[i] / d3_3 + m;
					if (y < m - n) y = m - n;
					if (y > m + n) y = m + n;
					ctx.lineTo(i / 5 + 20, y);
				}


				ctx.stroke();
				ctx.closePath();
			};
			const drowEcg = () => {
				console.log('====>>开始canvas');
				var c_canvas = document.getElementById('ecg');
				var cxt = c_canvas.getContext('2d');
				cxt.clearRect(0, 0, c_canvas.width, c_canvas.height);

				drawSmallGrid(c_canvas);
				drawMediumGrid(c_canvas);
				drawBigGrid(c_canvas);
				drawLine(c_canvas);
				return;
			};


			return {
				openDialog,
				closeDialog,
				onCancel,
				onSubmit,
				...toRefs(state),

				onPrintJs,
				onPrintJpg,
				onPrintPdf,

				drowEcg,
			};
		},
	};
</script>

<style>
    /*.avatar-uploader {*/
    /*    width: 8rem;*/
    /*    height: 8rem;*/


    /*}*/

    /*.avatar {*/
    /*    width: 8rem;*/
    /*    height: 8rem;*/

    /*}*/

    /*.el-icon-success {*/
    /*    color: #22bc76;*/
    /*    font-size: 1.5rem;*/
    /*}*/

    /*.el-icon-error {*/
    /*    color: red;*/
    /*    font-size: 1.5rem;*/
    /*}*/


    /*.flex-content {*/
    /*    width: 580px;*/
    /*    height: 150px;*/
    /*}*/

    /*.div_A {*/
    /*    width: 100%;*/
    /*    height: 50px;*/

    /*}*/

    /*!*为了突出画布效果可以在css中设置一个边框。*!*/
    /*#mycanvas {*/
    /*    border: 1px solid rgb(199, 198, 198);*/
    /*}*/

    /*.can0 {*/
    /*    width: 590px;*/
    /*    height: 700px;*/
    /*}*/

    .html2canvas-container {
        width: 2500px !important;
        height: 7500px !important;
    }

      .el-dialog__body {
        border-top: 1px solid #dcdfe6;
        border-bottom: 1px solid #dcdfe6;
        max-height:90vh  !important;
        overflow-y: auto;
    }
    el-header{
        font-size: 15px;
    }
</style>
